<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Pulley System</title>
</head>
<body>

<canvas id="physicsCanvas" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters and coordinates based on analysis
    const pulleyPos = { x: 150, y: 100 };
    const pulleyRadius = 20;
    const tableY = 300;
    const tableCornerX = 180;
    const blockB_H = 20;
    const blockB_W = 60;

    // Calculate position of Block B to achieve a 30-degree rope angle
    const angleDeg = 30;
    const angleRad = angleDeg * Math.PI / 180;
    const blockB_attach_Y = tableY - blockB_H;
    // From tan(angle) = dy / dx, we get dx = dy / tan(angle)
    const dy_rope = blockB_attach_Y - pulleyPos.y;
    const dx_rope = dy_rope / Math.tan(angleRad);
    const blockB_attach_X = pulleyPos.x + dx_rope;

    const blockB_pos = { x: blockB_attach_X, y: blockB_attach_Y };

    // Block A parameters
    const blockA_W = 40;
    const blockA_H = 30;
    const blockA_pos = { x: pulleyPos.x - blockA_W / 2, y: 200 };

    // Set global drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Drawing Functions ---

    // Draw Support Structure
    ctx.beginPath();
    ctx.moveTo(pulleyPos.x - 30, 60);
    ctx.lineTo(pulleyPos.x + 30, 60);
    // Hatching lines for the fixed support
    for (let i = 0; i < 7; i++) {
        ctx.moveTo(pulleyPos.x - 30 + i * 10, 60);
        ctx.lineTo(pulleyPos.x - 35 + i * 10, 50);
    }
    // Vertical rod for pulley
    ctx.moveTo(pulleyPos.x, 60);
    ctx.lineTo(pulleyPos.x, pulleyPos.y);
    ctx.stroke();

    // Draw Pulley
    ctx.beginPath();
    ctx.arc(pulleyPos.x, pulleyPos.y, pulleyRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw Tabletop
    ctx.beginPath();
    ctx.moveTo(tableCornerX, tableY);
    ctx.lineTo(canvas.width, tableY); // Horizontal surface
    ctx.moveTo(tableCornerX, tableY);
    ctx.lineTo(tableCornerX, tableY + 100); // Vertical edge
    ctx.stroke();

    // Draw Block A
    ctx.strokeRect(blockA_pos.x, blockA_pos.y, blockA_W, blockA_H);
    ctx.font = 'italic 20px serif';
    ctx.fillText('A', blockA_pos.x - 25, blockA_pos.y + 22);

    // Draw Block B
    ctx.strokeRect(blockB_pos.x, blockB_pos.y, blockB_W, blockB_H);
    ctx.fillText('B', blockB_pos.x + blockB_W - 15, blockB_pos.y - 8);

    // Draw Rope connecting the two blocks over the pulley
    ctx.beginPath();
    // Rope segment to A (vertical from pulley center to top of block A)
    ctx.moveTo(pulleyPos.x, pulleyPos.y);
    ctx.lineTo(pulleyPos.x, blockA_pos.y);
    // Rope segment to B (from pulley center to top-left corner of block B)
    ctx.moveTo(pulleyPos.x, pulleyPos.y);
    ctx.lineTo(blockB_pos.x, blockB_pos.y);
    ctx.stroke();

    // Draw Angle Annotation
    const angleVertex = { x: blockB_pos.x, y: tableY };
    const angleArcRadius = 40;

    // Angle Arc
    ctx.beginPath();
    ctx.arc(angleVertex.x, angleVertex.y, angleArcRadius, Math.PI, Math.PI + angleRad);
    ctx.stroke();
    
    // Angle Value Text
    ctx.font = '20px serif';
    ctx.fillText('30°', angleVertex.x - angleArcRadius - 5, angleVertex.y - 15);

    // Small right-angle marker at the angle vertex, as seen in the original image
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(angleVertex.x - 8, angleVertex.y);
    ctx.lineTo(angleVertex.x, angleVertex.y);
    ctx.lineTo(angleVertex.x, angleVertex.y - 8);
    ctx.stroke();
    ctx.lineWidth = 2; // Reset line width

    // Draw Chinese Text for Tabletop
    ctx.font = '24px sans-serif';
    ctx.fillText('水平桌面', 250, 335);

</script>

</body>
</html>